<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {


    const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });

    document.getElementById('pixi-Dragging-container').appendChild(app.view);

    // create a texture from an image path
    const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');

    // Scale mode for pixelation
    texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

    for (let i = 0; i < 10; i++) {
        createBunny(Math.floor(Math.random() * app.screen.width), Math.floor(Math.random() * app.screen.height));
    }

    function createBunny(x, y) {
        // create our little bunny friend..
        const bunny = new PIXI.Sprite(texture);

        // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
        bunny.eventMode = 'static';

        // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
        bunny.cursor = 'pointer';

        // center the bunny's anchor point
        bunny.anchor.set(0.5);

        // make it a bit bigger, so it's easier to grab
        bunny.scale.set(3);

        // setup events for mouse + touch using
        // the pointer events
        bunny.on('pointerdown', onDragStart, bunny);

        // move the sprite to its designated position
        bunny.x = x;
        bunny.y = y;

        // add it to the stage
        app.stage.addChild(bunny);
    }

    let dragTarget = null;

    app.stage.eventMode = 'static';
    app.stage.hitArea = app.screen;
    app.stage.on('pointerup', onDragEnd);
    app.stage.on('pointerupoutside', onDragEnd);

    function onDragMove(event) {
        if (dragTarget) {
            dragTarget.parent.toLocal(event.global, null, dragTarget.position);
        }
    }

    function onDragStart() {
        // store a reference to the data
        // the reason for this is because of multitouch
        // we want to track the movement of this particular touch
        // this.data = event.data;
        this.alpha = 0.5;
        dragTarget = this;
        app.stage.on('pointermove', onDragMove);
    }

    function onDragEnd() {
        if (dragTarget) {
            app.stage.off('pointermove', onDragMove);
            dragTarget.alpha = 1;
            dragTarget = null;
        }
    }
})



</script>

<template>
    <div id="pixi-Dragging-container"></div>
</template>

<style scoped></style>
